<template>
    <div class="app-container">
        <el-button icon="el-icon-download" type="primary" @click="exportData" size="small"
            style="margin-bottom: 10px;">导出数据</el-button>
        <el-button icon="el-icon-upload2" slot="trigger" size="small" type="primary"
            @click="dialogImportVisible = true">导入数据</el-button>
        <el-dialog :visible.sync="dialogImportVisible" width="480px">
            <el-upload class="upload-demo" drag :action="importUrl" width="100%" :on-success="onUploadSuccess"
                :on-error="onUploadError" :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传xsl/xlsx文件，且不超过500kb</div>
            </el-upload>

        </el-dialog>
        <el-table :data="dictList" style="width: 100%" row-key="id" lazy :load="getChildrens"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="id" label="id">
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="dictCode" label="编码">
            </el-table-column>
            <el-table-column prop="value" label="值">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import dict from '../../api/dict'
import { mapGetters } from 'vuex'
export default {
    name: 'dict',
    data() {
        return {
            dictList: [],
            dialogImportVisible: false, // 控制上传的弹窗
            importUrl: process.env.VUE_APP_BASE_API + '/system/dict/import',
            exportUrl: process.env.VUE_APP_BASE_API + '/system/dict/export',
            fileList: []
        }
    },
    computed: {
        ...mapGetters(
            ['token']
        )
    },
    methods: {
        // 获取字典列表
        getDictList(id) {
            dict.findChildData(id)
                .then(res => {
                    this.dictList = res.data
                })
        },
        // 获取字典子级列表
        getChildrens(tree, treeNode, resolve) {
            dict.findChildData(tree.id)
                .then(res => {
                    resolve(res.data)
                })
        },
        // 导出文件
        exportData() {
            console.log(this.exportUrl + '?token=' + this.token)
            // location.href = this.exportUrl + '?token=' + this.token
            // dict.exportData().then(res => {
            //     this.$message({
            //         message: '导出成功',
            //         type: 'success'
            //     });
            // })
        },
        // 文件上传成功
        onUploadSuccess(response, file, fileList) {
            this.dialogImportVisible = false;
            this.getDictList(1)
            console.log(response)
            if (response.code === 200) {
                this.$message({
                    type: 'success',
                    message: '导入成功!'
                });
            } else if (response.code === 444) {
                this.$message.error(response.message)
            } else {
                this.$message.error("导入失败！！")
            }
            this.fileList = []
        },
        // 文件上传失败
        onUploadError(err, file, fileList) {
            this.$message.error("导入失败！！")
        }
    },
    mounted() {
        this.getDictList(0)
    },
}
</script>

<style scoped>
::v-deep th {
    background-color: #f8f8f9;
}
.upload-demo {
    display: inline-block;
    margin-left: 10px;
}

.el-upload__tip {
    text-align: center;
}

.upload-demo {
    margin-left: 10%
}
</style>